<!--
 * @FilePath: ChildrenFour.vue
 * @Author: jack
 * @Date: 2024-05-14 17:03:57
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-06-27 09:54:28
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <div class="layer-common-box">
        <div class="tips"><span>*</span> 请选择需要显示的字段</div>
        <div class="row-center-flex row" :style="index == props.currentItem.content.length - 1 ? '' : 'margin-bottom:15px;'"
            v-for="(item, index) in props.currentItem.content" :key="index">
            <div style="flex: 1;">
                <el-select v-model="item.id" filterable
                    @change="((val: number | string) => { handleChange(val, index) })" style="width:100%;"
                    placeholder="请选择">
                    <el-option v-for="(item, index) in selelctList" :key="index"
                        :label="`${item.name}（类型：${Number(item.type) == 1 ? '图片' : Number(item.type) == 2 ? '视频' : '链接'}）`"
                        :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="row" style="width: 80px;">
                <div class="del-btn-box row" @click="toDel(index)" v-if="props.currentItem.content.length != 1">
                    <el-icon>
                        <RemoveFilled />
                    </el-icon>
                </div>
                <div class="add-btn-box row" @click="toAdd(index)">
                    <el-icon>
                        <CirclePlusFilled />
                    </el-icon>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getScreenSettingList, operateScreenSetting, getMaterList } from '../Api/index'
interface PropsType {
    currentItem?: any
    typeId?: string
}
const props = withDefaults(defineProps<PropsType>(), {
    currentItem: {},
    typeId: ''
})
const emit = defineEmits<EmitType>()
interface EmitType {
    (e: 'getConfig'): void
}
// const dataList = ref<any>([
//     {
//         id: '',
//     }
// ])
// // 初始化数据 拿到父级所传过来的数据
// const getinfo = async () => {
//     if (props.currentItem.content && props.currentItem.content.length > 0) {
//         props.currentItem.content = JSON.parse(JSON.stringify(props.currentItem.content))
//     }
// }
// 获取可选列表
const selelctList = ref<any>([])
const getSelList = async () => {
    const res: any = await getMaterList({ type_id: props.typeId })
    if (res.code !== 1) return ElMessage.error(res.message)
    if (res.data.length > 0) {
        selelctList.value = res.data[0].content
    }
}
watch(
    () => props.typeId,
    async (newValue, oldValue) => {
        await getSelList()
        // await getinfo()
    },
    { deep: true, immediate: true, }
)

const handleChange = (val: number | String, index: number) => {
    const obj = ref<any>({})
    obj.value = selelctList.value.find(function (i: any) {
        return i.id === val
    })
    props.currentItem.content[index] = JSON.parse(JSON.stringify(obj.value))
}
const toDel = (index: number) => {
    props.currentItem.content.splice(index, 1)
}
const toAdd = (Index: number) => {
    props.currentItem.content.splice(Index + 1, 0, {
        id: ''
    })
}
// 添加数据
const submitFrom = async () => {
    // 提交数据前先判断有没有填写完整
    let i = 0
    props.currentItem.content.forEach((item: any) => {
        if (!item.id) {
            i++
        }
    })
    if (i > 0) {
        return ElMessage.error('请输入完整信息!')
    }
    const res: any = await operateScreenSetting({ type_id: props.typeId, content: props.currentItem.content })
    if (res.code !== 1) return ElMessage.error(res.message)
    ElMessage.success(res.message)
    refreshChild()
}
const refreshChild = async () => {
    emit('getConfig')
    setTimeout(async () => {
        await getSelList()
        // await getinfo()
    }, 500);
}
defineExpose({ submitFrom, refreshChild })
</script>
<style lang="scss" scoped>
.layer-common-box {
    height: calc(100vh - 422px);
    overflow-y: scroll;

    .row-center-flex {
        display: flex;
        align-items: center;
        color: #737A80;
        border-radius: 3px;
        width: 53%;
        min-width: 200px;

        .flex-name {
            color: #737A80;
            margin-right: 15px;
        }

        .el-icon {
            font-size: 18px;
            cursor: pointer;
            color: #B8B8B8;
            margin-left: 15px;
        }
    }
}
</style>